<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单：采集用户信息，并提交到服务器
		表单元素：form
		 input控件元素：采集用户信息的元素
		 必须type类型属性   属性值   test          文本框
		                            password     密文的文本框
									submit       提交
									button       按钮 结合JS,value 【htmi4】
									reset        重置   form表单 控制
									color        颜色控件
									datetime-local本地日历控件
									date         年月日插件
									time         时间插件
									week         周插件
									range        滑块
									file         上滑文件
									radio        单选框结合name属性
									checkbox     复选框
									checked 默认选择【单复选框】
									image         图片按钮 结合src属性
									hidden        隐藏 结合JS
		 -->                     
		<h1>登录页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text"> <br><br>
		密码:<input type="possword"> <br><br>
		<input type="submit">
		<input type="button" value="自定义按钮">
		<!-- html5写法 -->
		<button>触发按钮</button>
		<input type="reset"><br><br>
		<input type="color">
		<input type="datetime-local">
		<input type="date">
		<input type="time">
		<input type="week">
		<input type="range">
		<input type="file">
		 男<input type="radio"name="sex">
		 女<input type="radio" name="sex" checked>
		 <input type="checkbox">红烧肉
		 <input type="checkbox"checked>肉沫粉条
		 <input type="checkbox">小鸡炖蘑菇<br><br>
		 <input type="image" src="img/1.png">
		 <input type="hidden">
		 <h4>表单元素：多行文本元素  cols行属性   rows列属性</h4>
		 建议：<textarea cols="20"rows="10"></textarea><br>
		 h4>表单元素：下拉列表：范围内的数据</h4>
		 <!-- 层级元素快捷键：select>option -->
		 发车时间<select>
		 	<option >00:00--24：00</option>
		 	<option >00:00--06:00</option>
		 	<option >06:00--12:00</option>
		 	<option >12:00--18:00</option>
		 	<option >18:00--24:00</option>
		 </select>
		 <h4>表单元素：细节元素</h4>
		 <!-- 层级元素  快捷键：details>summary+div -->
		 <details>
		 	<summary>征婚启事</summary>
		 	<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos molestiae maiores, qui et in exercitationem nesciunt! Quidem illo minima corporis. Quis quibusdam quo laboriosam explicabo suscipit architecto, ipsa ducimus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium libero mollitia soluta enim odit quisquam itaque facilis, inventore magni provident delectus, natus doloremque minima sapiente deserunt odio vel amet maiores? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate ad distinctio dolores aspernatur eveniet voluptatum deleniti sequi vitae culpa tenetur error adipisci laborum veritatis dolore, fuga odio molestiae voluptatibus quos!</div>
		 </details>
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假了</mark>
		<!-- 度量元素 必须属性 value="0~1" min属性  max属性-->
		 电量 <meter value="20" min="0"  max="100"></meter>
	</body>
</html>